import React, { memo } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Button, Input, Select } from "antd";

export default function KeySetting() {
  type FieldType = {
    type?: string;
    keyboard?: string;
  };

  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };
  return (
    <>
      <p>功能</p>
      <Form
        name="basic"
        style={{ maxWidth: "none" }}
        layout="inline"
        autoComplete="off"
        form={form}
        onFinish={onFinish}
        className="my-8"
      >
        <Form.Item<FieldType> name="type">
          <Button type="primary">前进</Button>
        </Form.Item>

        <Form.Item<FieldType> name="keyboard" className="w-3/4 ml-6">
          <Input placeholder="w" />
        </Form.Item>

        <Form.Item className="ml-6">
          <Button type="primary" onClick={onReset}>
            重置
          </Button>
          <Button type="primary" htmlType="submit" className="ml-8">
            保存
          </Button>
        </Form.Item>
      </Form>
    </>
  );
}
